<template>
  <div id="map" style="width: 100%; height: 500px"></div>
</template>

<script>
import mapboxgl from "mapbox-gl";
// import geojsonData from "./mapbox.json";

const mapboxToken =
  "pk.eyJ1IjoieXVuZXI5OTY4IiwiYSI6ImNrazY1cTh1bzAwc24yd3AyMzBnbmtiMXYifQ.KmABHgQ1OZ4EVax3poOzyA";
const mapUrl =
  "http://chart.xnuorui.com/mixinApi/chart/inuorui/C25DF8591255ADDF4040D23A64BA03C8/{z}/{x}/{y}.png";
const pbfUrl = "http://localhost:8000/pbfApi/{z}/{x}/{y}.pbf"; // 替换为你的瓦片服务 URL

const pngStyle = {
  version: 8,
  sources: {
    "custom-tiles": {
      type: "raster",
      tiles: [mapUrl],
      tileSize: 256,
    },
  },
  layers: [
    {
      id: "main-layer",
      type: "raster",
      source: "custom-tiles",
    },
  ],
  glyphs: "mapbox://fonts/mapbox/{fontstack}/{range}.pbf",
};

const pbfStyle = {
  version: 8,
  sources: {
    "custom-tiles": {
      type: "vector",
      tiles: [pbfUrl], // 替换为你的瓦片服务 URL
      tileSize: 512,
    },
  },
  layers: [
    {
      id: "output-line-layer", // 图层 ID
      type: "line", // 渲染线条
      source: "custom-tiles", // 瓦片来源
      "source-layer": "output1", // 指定图层名称
      paint: {
        "line-color": "#ff0000", // 设置线条颜色（红色）
        "line-width": 2, // 设置线条宽度
        "line-opacity": 1, // 设置线条不透明度
      },
    },
  ],
};

export default {
  name: "MapboxMap",
  mounted() {
    mapboxgl.accessToken = mapboxToken; // 替换为你的 Mapbox token

    // 创建 Mapbox 地图实例，style 设置为你自己的 PBF 瓦片
    this.map = new mapboxgl.Map({
      container: "map", // 容器 ID
      // style: pngStyle,
      style: pbfStyle,
      center: [61.0948, -32.5077], // 初始地图中心 [longitude, latitude]
      zoom: 10, // 初始缩放级别
      maxZoom: 16, // 设置最大缩放级别
      minZoom: 0, // 设置最小缩放级别
      pitch: 0, // 设置俯视角度
      bearing: 0, // 设置地图的旋转角度
      crossOrigin: "anonymous", // 允许跨域请求（根据你的需求可能需要设置）
    });
  },

  beforeDestroy() {
    if (this.map) {
      this.map.remove();
    }
  },
};
</script>

<style scoped>
#map {
  width: 100%;
  height: 500px;
  background-color: #0f0;
}
</style>
